<template>
  <div>
    <div>
        <div>
            <van-nav-bar title="编辑地址" left-arrow class="vant_head" @click-left="onClickLeft" />
            <div style="position: relative;width: 100%;height: 2rem;line-height: 2rem;top: 1rem;">
                <div style="position: absolute;left: 1rem;border: none;outline: none">
                    姓名<input placeholder="收货人姓名" v-model="raw.nickname" type="text" ref="divRef"
                        style="border: none;outline: none;;padding-left: 1rem;">
                </div>
                <div style="position: absolute;left: 1rem;border: none;outline: none;top: 3rem;">电话<input
                        placeholder="收货人手机号" v-model="raw.tel" type="text"
                        style="border: none;outline: none;;padding-left: 1rem;">
                </div>
                <div style="position: absolute;left: 1rem;border: none;outline: none;top: 6rem;">地区<input
                        placeholder="选择省/市/区" v-model="raw.detail_address" type="text"
                        style="border: none;outline: none;;padding-left: 1rem;">
                    <span>
                        <img src="../../assets//jian.png" alt=""
                            style="position: absolute;width: 1.25rem;height: 1.25rem;right: -8.1875rem;"> </span>
                </div>
                <div style="position: absolute;left: 1rem;border: none;outline: none;top: 9rem;">详细地址<input
                        placeholder="街道门牌、楼层房间信息等" v-model="raw.provice_city_area" type="text"
                        style="border: none;outline: none;;padding-left: 1rem;">
                </div>

            </div>
            <button @click="handleAdd"
                style="width: 90%;height: 3rem;position: absolute;left: 1rem;top: 17rem;border-radius: 1.5rem; border: none;background-color: #63c38a;color: #fff;">保存</button>
        </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'
const token = ref(localStorage.getItem('token'))
//console.log(token);
const router = useRouter()
const divRef = ref()
import { ref, onMounted } from 'vue'
// // 左侧返回
const onClickLeft = () => {
  router.push({ path: '/address' })
}
const handleAdd = () => {
  if (raw.value.nickname == '' || raw.value.tel == '' || raw.value.detail_address == '') {
    showToast({
      message: '请填写完整信息',
    })
  } else {
    showToast({
      message: '添加成功！',
      icon: 'success',
    })
    getaddresss()
  }
}
const raw = ref({
  tel: '11',
  nickname: '67676',
  provice_city_area: '67676',
  longitude: '1',
  latitude: '2',
  detail_address: '67676',
})
console.log(raw.value)
//新增
const getaddresss = async () => {
  await axios
    .post('/addres/addressChunYuAdd', raw.value)
    .then((res) => {
      console.log(res)
    })
    .catch((error) => {
      console.log(error)
    })
}
getaddresss()
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
  color: #63c38a !important;
}

:deep(.van-nav-bar__text) {
  color: #63c38a !important;
}

:deep(.van-button) {
  background-color: #63c38a !important;
  color: white !important;
  border: none;
}
</style>
